<template>
  <view class="flex-row align-center justify-between">
    <view class="filter-box flex-row flex-center">
      <view v-for="(item,index) in recent" :key="index" class="filter-item padding-lr-20 flex-row flex-center" @click="recentChange(item,index)">
        <text class="text-24 filter-text" :class="['color-' + (index === inx ? 'primary' : 't1')]">{{ item.label }}</text>
      </view>
      <view class="slider" :class="{transition}" :style="{left:attr.left+'px',width:attr.width+'px'}" />
    </view>
    <view class="filter-box flex-row flex-center" @click="changeDate">
      <view class="flex-row flex-center padding-lr-16">
        <text class="text-24 color-t1">{{ value(startTime,endTime) }}</text>
      </view>
    </view>
  </view>
</template>

<script>
import { dateFormat } from '@/common/util'
export default {
  name: 'DateFilter',
  props: {
    startTime: {
      type: String,
      default: ''
    },
    endTime: {
      type: String,
      default: ''
    }
  },
  data() {
    const day = new Date().getDate()
    const endDate = dateFormat()
    const yesterday = dateFormat(new Date().setDate(day - 1))
    const week = dateFormat(new Date().setDate(day - 7))
    const mouth = dateFormat(new Date().setDate(1))
    return {
      recent: [
        { label: '近七日', value: { startDate: week, endDate }},
        { label: '昨日', value: { startDate: yesterday, endDate: yesterday }},
        { label: '本月', value: { startDate: mouth, endDate }}
      ],
      inx: 2,
      left: 0,
      width: 0,
      info: [],
      transition: false
    }
  },
  computed: {
    value() {
      return (s, e) => {
        s = s.replace(/-/g, '.')
        e = e.replace(/-/g, '.')
        if (s === e) return s
        else return s + ' - ' + e
      }
    },
    attr() {
      if (this.info.length) {
        return this.info[this.inx]
      } else {
        return {
          left: 0,
          width: 0
        }
      }
    }
  },
  watch: {
    startTime() {
      this.setInx()
    },
    endTime() {
      this.setInx()
    }
  },
  mounted() {
    this.getInfo()
  },
  methods: {
    setInx() {
      for (let i = 0; i < this.recent.length; i++) {
        const value = this.recent[i].value
        if (this.startTime === value.startTime && this.endTime === value.endTime) {
          this.inx = i
          return
        }
      }
    },
    changeDate() {
      this.$emit('change')
    },
    recentChange(item, inx) {
      this.inx = inx
      this.$emit('recentUpdate', item.value)
    },
    getInfo() {
      this.getElementInfo('.filter-item', res => {
        this.info = res.map(item => {
          return {
            left: item.left,
            width: item.width
          }
        })
        setTimeout(() => {
          this.transition = true
        }, 300)
      }, this)
    }
  }
}
</script>

<style scoped lang="scss">
@include setPadding(lr,16);

.filter-box{
  height: 64rpx;
  background: $color-background;
  border-radius: 8rpx;
  border: 2rpx solid $color-border;
  padding:0 4rpx;
}
.filter-item{
  height: 56rpx;
  z-index:10;
}
.slider{
  @include position(absolute,4);
  height: 56rpx;
  z-index:5;
  background:$color-secondary;
  border-radius: 8rpx;
}
.transition{
  transition: all .3s linear;
}
.filter-text{
  transition-delay: .15s;
}
</style>
